<template>
  <div class='container'>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="data" :rules="rules" >
        <!-- 输入框 -->
        <el-form-item label="学科名称" class="Addsubjects-name" prop="subjectName">
          <el-input
            v-model="data.subjectName"
            placeholder="请输入内容"
            class="Addsubjects-input"
            size="small"></el-input>
        </el-form-item>
        <!-- 按钮 -->
      <el-form-item label="是否显示" class="Addsubjects-name" prop="isFrontDisplay">
        <el-switch
              class="Addsubjects-switch"
              v-model="data.isFrontDisplay"
              :active-value="nub"
              :inactive-value="nub1"
              active-color="#13ce66"
              inactive-color="#ff4949">
        </el-switch>
      </el-form-item>
      <!-- 确定取消 -->
      <el-form-item class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="AddSubjects">确 定</el-button>
      </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '../../api/hmmm/subjects'
export default {
  name: 'Addsubjects',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      nub: 1,
      nub1: 0,
      data: {
        subjectName: '',
        isFrontDisplay: ''
      },
      // title: ' 新增学科',
      // 表单验证
      rules: {
        subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }],
        isFrontDisplay: [{ required: true, trigger: 'blur' }]
      }
    }
  },
  computed: {
    title () {
      return this.data.id ? '修改学科' : '新增学科'
    }
  },

  methods: {
    // 编辑对话框数据回显
    async numBack (row) {
      const res = await detail(row)
      this.data = res.data
    },
    // 确定按钮
    AddSubjects () {
      this.$refs.form.validate(async (boo) => {
        if (!boo) return
        if (this.data.id) {
          await update(this.data)
          this.$message.success('修改学科成功')
        } else {
          await add(this.data)
          this.$message.success('新增学科成功')
        }
        this.$parent.getList()// 调用父组件方法渲染页面
        this.handleClose()
      })
    },
    handleClose () {
      this.data = {}
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
      this.$emit('handleClose')
    }
  }
}
</script>

<style scoped lang='less'>
.container{
  .Addsubjects-name{
    font-weight:bold;
    margin-right: 5px;
  }
  .Addsubjects-input{
    width: 200px;
  }
  .switch{
    margin-top: 15px;
  }
  .dialog-footer{
    text-align: center;
    margin-bottom: -15px;
  }
}
</style>
